<!-- <div class="library-form">
  <form nz-form [formGroup]="libraryForm" role="form">

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>文件扩展名</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="artifactName" autocomplete="off"
          placeholder="文件扩展名">
        <nz-form-explain *ngIf="!(libraryForm.get('artifactName').valid || libraryForm.get('artifactName').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('artifactName').hasError('required')">文件扩展名不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6">测评时间</nz-form-label>
      <nz-form-control nzSpan="18">
        <nz-date-picker nzShowTime formControlName="dateProfiled" nzSize="default"></nz-date-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>评级</nz-form-label>
      <nz-form-control nzSpan="18">
        <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择评级" formControlName="grade"
          class="form-select">
          <nz-option nzCustomContent nzLabel="A" nzValue="A">A
          </nz-option>
          <nz-option nzCustomContent nzLabel="B" nzValue="B">B</nz-option>
          <nz-option nzCustomContent nzLabel="C" nzValue="C">C</nz-option>
          <nz-option nzCustomContent nzLabel="D" nzValue="D">D</nz-option>
        </nz-select>
        <nz-form-explain *ngIf="!(libraryForm.get('grade').valid || libraryForm.get('grade').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('grade').hasError('required')">评级不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>组件名称</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="groupName" autocomplete="off" placeholder="组件名称">
        <nz-form-explain *ngIf="!(libraryForm.get('groupName').valid || libraryForm.get('groupName').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('groupName').hasError('required')">组件名不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>hash</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="hash" autocomplete="off" placeholder="hash值">
        <nz-form-explain *ngIf="!(libraryForm.get('hash').valid || libraryForm.get('hash').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('hash').hasError('required')">hash不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6">最近发布日期</nz-form-label>
      <nz-form-control nzSpan="18">
        <nz-date-picker nzShowTime formControlName="latestReleaseDate" nzSize="default">
        </nz-date-picker>
        <nz-form-explain
          *ngIf="!(libraryForm.get('latestReleaseDate').valid || libraryForm.get('latestReleaseDate').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('latestReleaseDate').hasError('required')">最近发布时间不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-control>
      <nz-form-label nzFor="" nzSpan="6">最新版本号</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="latestVersion" autocomplete="off"
          placeholder="hash值">
        <nz-form-explain
          *ngIf="!(libraryForm.get('latestVersion').valid || libraryForm.get('latestVersion').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('latestVersion').hasError('required')">最新版本号</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-control>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6">首次发布日期</nz-form-label>
      <nz-form-control nzSpan="18">
        <nz-date-picker nzShowTime formControlName="releaseDate" nzSize="default"></nz-date-picker>
        <nz-form-explain *ngIf="!(libraryForm.get('releaseDate').valid || libraryForm.get('releaseDate').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('releaseDate').hasError('required')">发布时间不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6">版本号</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="version" autocomplete="off" placeholder="版本号">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6">更新版本数</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="versionsBehind" autocomplete="off"
          placeholder="更新版本数">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="" nzSpan="6" nzRequired>licenseIds</nz-form-label>
      <nz-form-control nzSpan="18">
        <input type="text" nz-input nzSize="default" formControlName="licenseIds" autocomplete="off"
          placeholder="licenseIds">
        <nz-form-explain *ngIf="!(libraryForm.get('licenseIds').valid || libraryForm.get('licenseIds').untouched)">
          <span class="text-danger" *ngIf="libraryForm.get('licenseIds').hasError('required')">licenseIds不能为空！</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control class="modal-footer">
        <button nz-button nzType="primary" class="modal-footer-btn"
          (click)="addLibrary()">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
        <button nz-button nzType="primary" class="modal-footer-btn" nzGhost="true"
          (click)="destroyModal()">取&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>  -->

<div class="library-form">
    <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
        <nz-tab nzTitle="通用">
            <form nz-form [formGroup]="libraryForm" role="form" class="form-position-margin">
                <nz-form-item>
                    <nz-form-label nzFor="" nzSpan="6" nzRequired>组件名称</nz-form-label>
                    <nz-form-control nzSpan="18">
                      <input type="text" nz-input nzSize="default" formControlName="artifactName" autocomplete="off"
                        placeholder="组件名称">
                      <nz-form-explain *ngIf="!(libraryForm.get('artifactName').valid || libraryForm.get('artifactName').untouched)">
                        <span class="text-danger" *ngIf="libraryForm.get('artifactName').hasError('required')">组件名称不能为空！</span>
                      </nz-form-explain>
                    </nz-form-control>
                  </nz-form-item>
          
                  <nz-form-item>
                      <nz-form-label nzFor="" nzSpan="6" nzRequired>版本号</nz-form-label>
                      <nz-form-control nzSpan="18">
                        <input type="text" nz-input nzSize="default" formControlName="version" autocomplete="off" placeholder="版本号">
                        <nz-form-explain *ngIf="!(libraryForm.get('version').valid || libraryForm.get('version').untouched)">
                            <span class="text-danger" *ngIf="libraryForm.get('version').hasError('required')">版本号不能为空！</span>
                          </nz-form-explain>
                      </nz-form-control>
                    </nz-form-item>
          
                    <nz-form-item>
                        <nz-form-label nzFor="" nzSpan="6" nzRequired>组织名称</nz-form-label>
                        <nz-form-control nzSpan="18">
                          <input type="text" nz-input nzSize="default" formControlName="groupName" autocomplete="off" placeholder="组织名称">
                          <nz-form-explain *ngIf="!(libraryForm.get('groupName').valid || libraryForm.get('groupName').untouched)">
                            <span class="text-danger" *ngIf="libraryForm.get('groupName').hasError('required')">组织名称不能为空！</span>
                          </nz-form-explain>
                        </nz-form-control>
                      </nz-form-item>
              
                  <nz-form-item>
                    <nz-form-label nzFor="" nzSpan="6" nzRequired>许可</nz-form-label>
                    <nz-form-control nzSpan="18">
                      <nz-select style="width: 100%" nzMode="multiple" nzAllowClear nzPlaceHolder="选择许可证" formControlName="licenseIds" [(ngModel)]="selectValue" class="form-select">
                        <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.name" [nzValue]="option.value"></nz-option>
                      </nz-select>
                      <nz-form-explain *ngIf="!(libraryForm.get('licenseIds').valid || libraryForm.get('licenseIds').untouched)">
                        <span class="text-danger" *ngIf="libraryForm.get('licenseIds').hasError('required')">许可不能为空！</span>
                      </nz-form-explain>
                    </nz-form-control>
                  </nz-form-item>
              
                  <nz-form-item>
                    <nz-form-label nzFor="" nzSpan="6" >hash</nz-form-label>
                    <nz-form-control nzSpan="18">
                      <input type="text" nz-input nzSize="default" formControlName="hash" autocomplete="off" placeholder="hash值">
                      <nz-form-explain *ngIf="!(libraryForm.get('hash').valid || libraryForm.get('hash').untouched)">
                        <span class="text-danger" *ngIf="libraryForm.get('hash').hasError('required')">hash不能为空！</span>
                      </nz-form-explain>
                    </nz-form-control>
                  </nz-form-item>
                 
                  <nz-form-item>
                    <nz-form-control class="modal-footer">
                      <button nz-button nzType="primary" class="modal-footer-btn"
                        (click)="addLibrary()">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
                      <button nz-button nzType="primary" class="modal-footer-btn" nzGhost="true"
                        (click)="destroyModal()">取&nbsp;&nbsp;&nbsp;&nbsp;消</button>
                    </nz-form-control>
                  </nz-form-item>
            </form> 
        </nz-tab>
        <nz-tab nzTitle="高级">
          <form nz-form [formGroup]="libraryForm" role="form" class="form-position-margin">

            <nz-form-item>
                <nz-form-label nzFor="" nzSpan="6" >cve编号</nz-form-label>
                <nz-form-control nzSpan="18">
                  <input type="text" nz-input nzSize="default" formControlName="cveName" autocomplete="off" placeholder="cve编号">
                  <!-- <nz-form-explain
                  *ngIf="!(libraryForm.get('cveName').valid || libraryForm.get('cveName').untouched)">
                  <span class="text-danger" *ngIf="libraryForm.get('cveName').hasError('required')">cve编号不能为空</span>
                </nz-form-explain> -->
                </nz-form-control>
              </nz-form-item>
      
            <nz-form-item>
                <nz-form-label nzFor="" nzSpan="6" >最近发布日期</nz-form-label>
                <nz-form-control nzSpan="18">
                  <nz-date-picker nzShowTime formControlName="latestReleaseDate" nzSize="default">
                  </nz-date-picker>
                  <!-- <nz-form-explain
                    *ngIf="!(libraryForm.get('latestReleaseDate').valid || libraryForm.get('latestReleaseDate').untouched)">
                    <span class="text-danger" *ngIf="libraryForm.get('latestReleaseDate').hasError('required')">最近发布日期不能为空！</span>
                  </nz-form-explain> -->
                </nz-form-control>
              </nz-form-item>
          
              
              <nz-form-item>
                  <nz-form-label nzFor="" nzSpan="6" >首次发布日期</nz-form-label>
                  <nz-form-control nzSpan="18">
                    <nz-date-picker nzShowTime formControlName="releaseDate" nzSize="default"></nz-date-picker>
                    <!-- <nz-form-explain *ngIf="!(libraryForm.get('releaseDate').valid || libraryForm.get('releaseDate').untouched)">
                      <span class="text-danger" *ngIf="libraryForm.get('releaseDate').hasError('required')">首次发布日期不能为空！</span>
                    </nz-form-explain> -->
                  </nz-form-control>
                </nz-form-item>
          
              <nz-form-item>
                  <nz-form-label nzFor="" nzSpan="6" >最新版本号</nz-form-label>
                  <nz-form-control nzSpan="18">
                    <input type="text" nz-input nzSize="default" formControlName="latestVersion" autocomplete="off"
                      placeholder="最新版本号">
                    <!-- <nz-form-explain
                      *ngIf="!(libraryForm.get('latestVersion').valid || libraryForm.get('latestVersion').untouched)">
                      <span class="text-danger" *ngIf="libraryForm.get('latestVersion').hasError('required')">最新版本号不能为空</span>
                    </nz-form-explain> -->
                  </nz-form-control>
                </nz-form-item>
             
              <nz-form-item>
                <nz-form-control class="modal-footer">
                  <button nz-button nzType="primary" class="modal-footer-btn"
                    (click)="addLibrary()">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
                  <button nz-button nzType="primary" class="modal-footer-btn" nzGhost="true"
                    (click)="destroyModal()">取&nbsp;&nbsp;&nbsp;&nbsp;消</button>
                </nz-form-control>
              </nz-form-item>
        </form>
        </nz-tab>
      </nz-tabset>
  

</div>  
